<template>
<div>
  <div id="productChart" style="width: 600px; height: 400px;"></div>
</div>
</template>

<script>
import { getProductCategory } from '@/api/product/pictureTable.js';
import * as echarts from 'echarts';
export default {
  name: 'pictureTable',
  data() {
    return {}
  },
  mounted() {
    this.initproductChart()
  },
  methods: {
    // 动态演示数据
    initproductChart() {
      console.log('ecahrts' + echarts)
      // 初始化
      const chart = echarts.init(document.getElementById('productChart'))
      // 准备参数
      let option = {
        title: {
          text: '商品分类表'
        },
        tooltip: {},
        legend: {
          data: ['商品分类']
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            name: '商品分类',
            type: 'bar',
            data: []
          }
        ]
      };
      getProductCategory().then(res => {
        // 填充数据
        option.xAxis.data = res.data.map(item => item.name)
        option.series[0].data = res.data.map(item => item.value)
        // 绘制图表
        chart.setOption(option)
      }).catch(err => {
        console.log(err)
      })
    }
  },
}
</script>

